<template>
  <div class="user-list">
    <ToolBar>
      <el-button type="primary" icon="el-icon-plus" size="small" @click="addMenu()">添加</el-button>
      <div style="float: right">
        <el-input
            placeholder="请输入资源名称！"
            size="small"
            style="width: 140px"
            v-model="params.name"
            @clear="searchMenus"
            clearable>
        </el-input>
        <el-button @click="searchMenus" type="success" icon="el-icon-search" size="small"></el-button>
      </div>
    </ToolBar>
    <el-table :data="menusList" border ref="table" style="width: 100%">
      <el-table-column prop="moduleId" label="资源ID"> </el-table-column>
      <el-table-column prop="moduleName"  label="资源名称"> </el-table-column>

      <el-table-column prop="moduleType" label="资源类型">
        <div slot-scope="scope">{{$config.resourceType[scope.row.moduleType]}} </div>
      </el-table-column>

      <el-table-column prop="sortNo" label="排序号"> </el-table-column>

      <el-table-column prop="isValidate"  width="100" label="是否激活">
        <div slot-scope="scope" style="width: 100%;text-align: center">
          <el-tag v-if="scope.row.isValidate">正常</el-tag>
          <el-tag v-else type="danger">被删除</el-tag>
        </div>
      </el-table-column>
      <el-table-column
          label="操作"
          width="180">
        <template slot-scope="scope">
            <el-button @click="info(scope.row)" type="primary" icon="el-icon-tickets" circle  size="mini"></el-button>
            <el-button @click="editMenu(scope.row)" type="primary" icon="el-icon-edit" size="small" circle></el-button>
            <el-button @click="deleteMenu(scope.row.moduleId)" v-if="scope.row.isValidate != '0'" type="danger" icon="el-icon-delete" circle size="small"></el-button>
            <el-button @click="enableMenu(scope.row.moduleId)" v-else icon="el-icon-check" circle size="small"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <ViewDialog
            :title="viewDialogTitle"
            :dialogFormVisible="viewDialogVisible"
            :data="curItem"
            :menusList="menusList"
            @cancel="viewDialogVisible = false"
        >
    </ViewDialog>


    <AddDialog
            :title="addDialogTitle"
            :dialogFormVisible="addDialogVisible"
            :menusList="menusList"
            @val-change="addMenuCommit"
            @cancel="addDialogVisible = false"
        >
    </AddDialog>

    <EditDialog
            :title="editDialogTitle"
            :dialogFormVisible="editDialogVisible"
            :data="curItem"
            :menusList="menusList"
            @val-change="editMenuCommit"
            @cancel="editDialogVisible = false"
        >
    </EditDialog>


  </div>
</template>

<script>
  import ToolBar from '@/components/view/ToolBar.vue';
  import HelpHint from '@/components/view/HelpHint.vue';

  import ViewDialog from './ViewDialog.vue'
  import AddDialog from './AddDialog.vue'
  import EditDialog from './EditDialog.vue'
  export default {
    data() {
      return {
        params: {
          name: '',
        },
        viewDialogTitle: '查看详情',
        viewDialogVisible: false,
        addDialogTitle: '新增菜单',
        addDialogVisible: false,
        editDialogTitle: '编辑菜单',
        editDialogVisible: false,
        curItem: null,
        menusList: [

        ]
      }
    },
    methods: {
      init(){
          this.$APIS.default.listMenu({})
               .then(res => {
                    this.menusList= res.data.aaData
          });
      },
      searchMenus(){
        let tableRow = this.$refs.table.$el.querySelectorAll('tbody tr');
        let tableRowHeight = tableRow[1].offsetHeight;
        let isjump = false;
        for (let i = 0;i < this.menusList.length; i ++){
          if(this.params.name && this.menusList[i].moduleName.indexOf(this.params.name) != -1){
            tableRow[i].style.backgroundColor = '#85ce61';
            if(! isjump){
              scrollTo(0,i*tableRowHeight + 66 );isjump = true;
            }
          }else {
            tableRow[i].style.backgroundColor = '#fff';
          }
        }
      },
      addMenu() {
         this.addDialogVisible = true;
      },
      addMenuCommit(data){
        let self = this;
        this.$APIS.default.addMenuItem(data,{}).then(res => self.$commonFunc.resolveRspMsg(self,res),self.init());
        this.addDialogVisible = false;
        self.curItem = null;
      },

      editMenu(data) {
         let self=this;
         self.editDialogVisible = true;
         self.curItem = data;

      },
      editMenuCommit(data){
        let self = this;
        this.$APIS.default.updMenuItem(data,{}).then(res => self.$commonFunc.resolveRspMsg(self,res),self.init());
        self.editDialogVisible = false;
        self.curItem = null;
      },
      deleteMenu(moduleId) {
          let self = this;
          self.$confirm('此操作将删除该菜单, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              this.$APIS.default.deletMenuItem(moduleId,{})
                   .then(res =>  self.$commonFunc.resolveRspMsg(self,res),self.init());
          }).catch(() => {

          });
      },
      enableMenu(moduleId) {
          let self = this;
          self.$confirm('此操作将恢复该菜单, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              this.$APIS.default.enableMenuItem(moduleId,{})
                   .then(res =>  self.$commonFunc.resolveRspMsg(self,res),self.init());
          }).catch(() => {

          });
      },

      info(data){
         this.viewDialogVisible=true

         this.curItem = data;
      }


    },
    components: {
      ToolBar,HelpHint,ViewDialog,AddDialog,EditDialog
    },
    mounted: function () {
       this.init();
    }
  }
</script>
<style lang="less">

</style>
